import React, { Component } from 'react';
import '../styles/Register.css'
// 导入分装请求
import { user_register } from '../api/register.js'
class Register extends Component {
    constructor(props) {
        super(props);
        this.state = { phone: '', pass: '', conpass: '' }
    }

    //更改表单变为授控组件
    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    //  发起注册请求
    register() {
        //   先进行判断手机号是否符合正则
        console.log(this.state.phone);
        if (/^1[3456789]\d{9}$/.test(this.state.phone)) {
            // 手机号合适后即可发送请求
            user_register({ phone: this.state.phone, pass: this.state.pass }).then((res) => {
                console.log(res);
                if (res.data.code == 400) {
                    alert("该账号已被注册")
                }
                else if (res.data.code == 200) {
                    alert("注册成功")
                }
            })
        } else {
            alert('手机号有误')
        }
    }

    render() {
        return (
            <div className='register'>
                <div className='title'>注册页</div>
                <div className='block'>
                    <input type="text" name='phone' value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder='请输入手机号' />
                </div>
                <div className='block'>
                    <input type="text" name='pass' value={this.state.pass} onChange={(e) => { this.handleChange(e) }} placeholder='请输入密码' />
                </div>
                <div className='block'>
                    <input type="text" name='conpass' value={this.state.conpass} onChange={(e) => { this.handleChange(e) }} placeholder=' 确认密码' />
                </div>
                <div className='block'>
                    <input type="button" value='注册' onClick={() => { this.register() }} />
                </div>
            </div>
        );
    }
}

export default Register;